<template>
    <div class="app-container">
        <el-row>
            <el-tabs v-model="activeName" @click="handlerClick">
                <el-tab-pane label="最近7天" name="week"></el-tab-pane>
                <el-tab-pane label="最近30天" name="month"></el-tab-pane>
                <el-tab-pane label="最近90天" name="quarter"></el-tab-pane>
                <el-tab-pane label="最近半年" name="halfyear"></el-tab-pane>
            </el-tabs>
        </el-row>
        <el-row>
            <div class="btnGroup">
                <el-button class="btn" v-bind:class="{ btnfocusactive: isActiveView }" @click="fetchData(1)">日浏览量</el-button>
                <el-button class="btn" v-bind:class="{ btnfocusactive: isActiveEnterprise }" @click="fetchData(2)">企业入驻数</el-button>
                <el-button class="btn" v-bind:class="{ btnfocusactive: isActiveArchive }" @click="fetchData(3)">新增追溯档案数</el-button>
                <el-button class="btn" v-bind:class="{ btnfocusactive: isActiveNoFakeArchive }" @click="fetchData(4)">新增验证码档案数</el-button>
                <el-button @click="handleReturn">
                    <icon-svg icon-class="undo"></icon-svg>&nbsp;&nbsp;返回列表</el-button>
            </div>
        </el-row>
        <el-row>
            <div :class="className" :id="id" :style="{height:height,width:width}"></div>
        </el-row>
    </div>
</template>

<style scoped>
.pagetop {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.reportData {
    top: 1px;
    color: #48576a;
    cursor: pointer;
    display: block;
}

.reportData:hover {
    color: black;
    text-decoration: underline
}

.btn {
    margin-right: 0px;
    margin-left: 0px;
}

.btnGroup {
    /* margin-bottom: 15px; */
    white-space: nowrap;
    display: inline;
}

.btnfocusactive {
    color: #20a0ff;
    border: 1px solid #20a0ff;
}
</style>

<script>
import { getReportDataByDateScope } from 'api/report';
import { parseTime } from 'utils/index.js';
import echarts from 'echarts';

export default {
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '1024px'
        },
        height: {
            type: String,
            default: '600px'
        }
    },
    data() {
        return {
            activeName: 'week',
            queryObj: {
                type: 1,
                day: 7
            },
            chart: null,
            xData: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55'],
            yData: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
            options: {
                backgroundColor: 'white',
                title: {
                    text: '',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 20,
                        color: '#F1F1F3'
                    },
                    left: '6%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                },
                legend: {
                    icon: 'rect',
                    itemWidth: 14,
                    itemHeight: 5,
                    itemGap: 13,
                    data: [],
                    right: '4%',
                    textStyle: {
                        fontSize: 14,
                        color: '#57617B'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                    data: []
                }],
                yAxis: [{
                    type: 'value',
                    // name: '单位（%）',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                }],
                series: [{
                    name: '',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(219, 50, 51, 0.3)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(219, 50, 51, 0)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(219,50,51)',
                            borderColor: 'rgba(219,50,51,0.2)',
                            borderWidth: 12
                        }
                    },
                    data: []
                }]
            },
            isActiveView: false,
            isActiveEnterprise: false,
            isActiveArchive: false,
            isActiveNoFakeArchive: false,
        };
    },
    watch: {
        activeName: function(val) {
            if (val === 'week') {
                this.queryObj.day = 7
            }
            if (val === 'month') {
                this.queryObj.day = 30
            }
            if (val === 'quarter') {
                this.queryObj.day = 90
            }
            if (val === 'halfyear') {
                this.queryObj.day = 180
            }
            this.fetchData(this.queryObj.type)
        },
    },
    created() {
        let typeParams = this.$route.query.type || 1
        this.setBtnFocusStyle(typeParams)
        this.fetchData(typeParams)
        // this.currentBtnfocus = true
    },
    mounted() {

    },
    methods: {
        fetchData(type) {
            this.queryObj.type = type || this.queryObj.type;
            let requestParams = {
                type: this.queryObj.type,
                day: this.queryObj.day
            }
            this.setBtnFocusStyle(type)
            getReportDataByDateScope(requestParams).then(response => {
                let res = response.data;
                this.xData = [];
                this.yData = [];
                this.options.legend.data = [];
                this.options.series[0].name = '';
                if (res.flag === 1) {
                    let resData = res.data;
                    // 数据扁平化处理
                    for (let i = 0; i < resData.length; i++) {
                        this.xData.push(resData[i].key);
                        this.yData.push(resData[i].value);
                    }
                }
                this.options.xAxis[0].data = this.xData;
                this.options.series[0].data = this.yData;
                switch (type) {
                    case 1: this.options.legend.data = ['日浏览量']; this.options.series[0].name = '日浏览量'; break;
                    case 2: this.options.legend.data = ['企业入驻数']; this.options.series[0].name = '企业入驻数'; break;
                    case 3: this.options.legend.data = ['新增追溯档案数']; this.options.series[0].name = '新增追溯档案数'; break;
                    case 4: this.options.legend.data = ['新增验证码档案数']; this.options.series[0].name = '新增验证码档案数'; break;
                    default: break;
                }
                this.initChart();
            });
        },
        initChart() {
            this.chart = this.chart || echarts.init(document.getElementById(this.id));
            this.chart.setOption(this.options)
        },
        handlerClick() {

        },
        handleReturn() {
            this.$router.go(-1)
        },
        setBtnFocusStyle(type) {
            switch (type) {
                case 1:
                    this.isActiveView = true
                    this.isActiveEnterprise = false
                    this.isActiveArchive = false
                    this.isActiveNoFakeArchive = false
                    break
                case 2:
                    this.isActiveView = false
                    this.isActiveEnterprise = true
                    this.isActiveArchive = false
                    this.isActiveNoFakeArchive = false
                    break 
                case 3:
                    this.isActiveView = false
                    this.isActiveEnterprise = false
                    this.isActiveArchive = true
                    this.isActiveNoFakeArchive = false
                    break
                case 4:
                    this.isActiveView = false
                    this.isActiveEnterprise = false
                    this.isActiveArchive = false
                    this.isActiveNoFakeArchive = true
                    break 
                default:
                    break 
            }
        }
    }
};
</script>